数字时钟

先看看数字时钟的效果：

自定义 LedTextView

要实现上面的数字时钟的效果，直接使用 Android 的字体是肯定达不到的，那么需要用到一种特殊的字体。

这里，通过继承 TextView 实现使用自定义字体的 LedTextView，先看看如何使用自定义字体。

1、首先将字体文件放到 assets 目录下
很多使用 AndroidStudio 创建的项目是没有 assets 文件夹的，这里直接在 Module 的 src/main 目录下创建 assets 文件夹即可，如图：

一般建议不要直接将字体文件放到 assets 下，最好再创建一个文件夹 fonts 专门存放字体文件。

2、自定义 LedTextView 使用特定字体
直接看代码吧：

public class LedTextView extends TextView {

    private static final String FONTS_FOLDER = "fonts";
    private static final String FONT_DIGITAL_7 = FONTS_FOLDER
            + File.separator + "digital-7.ttf";

    public LedTextView(Context context) {
        super(context);
        init(context);
    }

    public LedTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public LedTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    private void init(Context context) {
        AssetManager assets = context.getAssets();
        final Typeface font = Typeface.createFromAsset(assets,
                FONT_DIGITAL_7);
        setTypeface(font);
    }

}

代码很简单：

获取 AssetManager
创建 Typeface 对象
为 LedTextView 设置 Typeface

好了，自定义 LedTextView 已经完成了，下面就是使用了。

简单模式数字时钟

先看效果：

实现步骤：
1、在布局中使用自定义 LedTextView
这个 LedTextView 与普通的 TextView 在使用上没有任何区别：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.diygreen.widgetuse.LedTextActivity">

    <com.diygreen.widgetuse.view.LedTextView
        android:id="@+id/tv_clock_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"/>
</RelativeLayout>

2、让“数字”动起来
要实现类似时钟计时的效果有很多方法：

利用 Timer
利用在 Thread 中 sleep
利用 Handler 的 postDelayed() 方法

这里使用 Handler 的 postDelayed() 方法来实现，就不一一演示其他的实现方案了。

思路是这样的：利用 Handler 可以延迟 post 一个 Runnable 的特性，每次延迟发送一个 Runnable 的时候，再次将该 Runnable 延迟发送，这样就可以形成一个循环，直到手动停止。

public class LedTextActivity extends AppCompatActivity {

    private static final String DATE_FORMAT = "%02d:%02d:%02d";
    private static final int REFRESH_DELAY = 500;

    private TextView mClockTimeTV;

    private final Handler mHandler = new Handler();
    private final Runnable mTimeRefresher = new Runnable() {
        @Override
        public void run() {
            final Date d = new Date();
            mClockTimeTV.setText(String.format(DATE_FORMAT, d.getHours(),
                    d.getMinutes(), d.getSeconds()));
            mHandler.postDelayed(this, REFRESH_DELAY);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_led_text);

        initView();
    }

    private void initView() {
        mClockTimeTV = (TextView) findViewById(R.id.tv_clock_time);
    }

    @Override
    protected void onResume() {
        super.onResume();
        mHandler.post(mTimeRefresher);
    }

    @Override
    protected void onStop() {
        super.onStop();
        mHandler.removeCallbacks(mTimeRefresher);
    }
}

代码量很少，在 Activity onResume() 时使用 Handler post 用于更新 LedTextView 的 Runnable，在该 Runnable 的 run() 方法中再使用 Handler postDelayed() 该 Runnable。不要忘了在 onStop() 方法中将 Runnable 移除。

优化效果

经过上面的步骤可以看到数字时钟已经跑起来的，但是效果还有差距：

没有底部阴影
没有发光效果

实现底部阴影

先看效果：

仔细观察现实当中的 Led 数字时钟，你会发现它在动的是发亮文本，下面还有一层阴影。要想做得更像那就得把该效果模拟出来，其实也很简单，直接在下面再放一个 LedTextView 显示固定的文本“88:88:88”即可。

实现代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.diygreen.widgetuse.LedTextActivity">
    <com.diygreen.widgetuse.view.LedTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:text="88:88:88"
        android:textColor="#3300ff00"
        android:textSize="80sp"/>
    <com.diygreen.widgetuse.view.LedTextView
        android:id="@+id/tv_clock_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="#00ff00"
        android:textSize="80sp"/>
</RelativeLayout>

实现发光效果

先看效果：

setShadowLayer() 方法
要实现发光效果也很简单，TextView 提供了 setShadowLayer() 方法：

1	public void setShadowLayer(float radius, float dx, float dy, int color);

该方法的四个参数分别是：

radius：阴影半径
dx：X 轴方向的偏移量
dy：Y 轴方向的偏移量
color：阴影颜色

属性设置阴影
当然，也可以通过属性设置：

shadowRadius
shadowDx
shadowDy
shadowColor

和 setShadowLayer() 方法的参数对应，可以直接在 xml 中设置。

示例代码

<com.diygreen.widgetuse.view.LedTextView
	android:id="@+id/tv_clock_time"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerVertical="true"
	android:layout_centerHorizontal="true"
	android:shadowRadius="10"
	android:shadowDx="0"
	android:shadowDy="0"
	android:shadowColor="#00ff00"
	android:textColor="#00ff00"
	android:textSize="80sp"/>